<template>
  <div class="todo-container">
    <!-- 桌面端使用Element Plus -->
    <div class="desktop-view">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>待办事项</span>
          </div>
        </template>
        
        <el-input 
          v-model="newTodo" 
          placeholder="请输入待办事项"
          @keyup.enter="addTodo"
          class="input-with-select"
        >
          <template #append>
            <el-button @click="addTodo" type="primary">添加</el-button>
          </template>
        </el-input>
        
        <el-divider />
        
        <el-table :data="todos" style="width: 100%">
          <el-table-column prop="text" label="事项" />
          <el-table-column width="180">
            <template #default="scope">
              <el-button 
                size="small" 
                :type="scope.row.completed ? 'warning' : 'success'"
                @click="toggleTodo(scope.row.id)"
              >
                {{ scope.row.completed ? '未完成' : '已完成' }}
              </el-button>
              <el-button 
                size="small" 
                type="danger" 
                @click="removeTodo(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    
    <!-- 移动端使用Vant -->
    <div class="mobile-view">
      <van-cell-group inset>
        <van-field
          v-model="newTodo"
          center
          clearable
          placeholder="请输入待办事项"
        >
          <template #button>
            <van-button size="small" type="primary" @click="addTodo">添加</van-button>
          </template>
        </van-field>
      </van-cell-group>
      
      <van-cell-group inset>
        <van-cell 
          v-for="todo in todos" 
          :key="todo.id"
          :title="todo.text"
          :class="{ 'completed': todo.completed }"
        >
          <template #right-icon>
            <van-button 
              size="small" 
              :type="todo.completed ? 'warning' : 'success'"
              @click="toggleTodo(todo.id)"
            >
              {{ todo.completed ? '未完成' : '已完成' }}
            </van-button>
            <van-button 
              size="small" 
              type="danger" 
              @click="removeTodo(todo.id)"
            >
              删除
            </van-button>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { showToast } from 'vant'

const newTodo = ref('')
const todos = ref([])

const addTodo = () => {
  if (!newTodo.value.trim()) {
    ElMessage.warning('请输入待办事项')
    showToast('请输入待办事项')
    return
  }
  
  todos.value.push({
    id: Date.now(),
    text: newTodo.value.trim(),
    completed: false
  })
  
  newTodo.value = ''
  ElMessage.success('添加成功')
  showToast('添加成功')
}

const toggleTodo = (id) => {
  const todo = todos.value.find(t => t.id === id)
  if (todo) {
    todo.completed = !todo.completed
    const msg = todo.completed ? '已完成' : '已取消完成'
    ElMessage.info(msg)
    showToast(msg)
  }
}

const removeTodo = (id) => {
  todos.value = todos.value.filter(t => t.id !== id)
  ElMessage.success('删除成功')
  showToast('删除成功')
}
</script>

<style scoped>
.todo-container {
  max-width: 800px;
  width: 100%; /* 确保元素有明确宽度，以便 margin: auto 生效 */
  margin: 10px auto; /* 上下外边距 10px，左右自动居中 */
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.box-card {
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
}

.input-with-select {
  margin-bottom: 20px;
}

.completed {
  text-decoration: line-through;
  color: #95a5a6;
}

/* 按钮颜色优化 */
el-button[type="primary"],
van-button[type="primary"] {
  background-color: #3498db;
  border-color: #3498db;
}

el-button[type="success"],
van-button[type="success"] {
  background-color: #2ecc71;
  border-color: #2ecc71;
}

el-button[type="warning"],
van-button[type="warning"] {
  background-color: #f39c12;
  border-color: #f39c12;
}

el-button[type="danger"],
van-button[type="danger"] {
  background-color: #e74c3c;
  border-color: #e74c3c;
}

/* 响应式设计 */
.desktop-view {
  display: block;
}

.mobile-view {
  display: none;
}

@media (max-width: 768px) {
  .desktop-view {
    display: none;
  }
  
  .mobile-view {
    display: block;
  }
  
  .todo-container {
    padding: 15px;
    background: #f8f9fa;
  }
}
</style>